<template>
  <div>
    <!-- 模板中不用.value, 因为编译模板中会自动.value -->
    <h2>count: {{count}}</h2>
    <button @click="update">更新</button>
  </div>
</template>


<script lang="ts">
  import {
    ref
  } from 'vue'
  export default {
    name: 'About',

    beforeCreate() {
      console.log('beforeCreate')
    },

    setup () {
      console.log('setup', this) // this是undefined
      // 创建一个ref响应式数据对象
      const count = ref(1)
      console.log(count)

      function update () {
        count.value = count.value + 1
      }

      return { // 返回对象中的所有属性和方法模板中可以直接使用
        count,
        update
      }
    }
  }
</script>